// 搜索条
<template>

<div class="search_form">

    <l-item-block :title='"搜索类型"'>
        <Select size='small' v-model="searchType" :style='{width: "12rem"}'>
            <Option v-for='(item, index) of typeOptions' :key='index' :value='item.value'>
                {{item.label}}
            </Option>
        </Select>
    </l-item-block>
    
    <l-item-block :title='"搜索内容"'> 
        <Input size='small' v-model="form[searchType]" :style='{width: "12rem"}'></Input>        
    </l-item-block>

    <l-item-block :title='"订单归属"'>

        <Poptip trigger="click" content="content" placement= 'right-start'>

            <ButtonGroup>
                <Button size='small' v-for='(name, index) of departmentBtns' :key='index'> {{name}} </Button>
            </ButtonGroup>
            
            <div class="content department-content" slot='content'>
                <l-department-list :companys='companys' @select='selectDepartment'></l-department-list>
            </div>

        </Poptip>

    </l-item-block>
    
    <l-item-block :title='"订单状态"'>
        <Select size='small' v-model="form.status" multiple :style='{width: "12rem"}'>
            <Option 
            v-for='(item, index) of carStatusConf' 
            :key='index' 
            :value='item.key' 
            :label='item.label'>
            
            <c-status-label :val='item' size='small'></c-status-label>
                
            </Option>
        </Select>
    </l-item-block>


    <l-item-block :title='"时间类型"'>
        <RadioGroup size='small' v-model="timeType" :style='{width: "12rem"}'>

            <Radio :label='item.value' v-for='(item, index) of timeOptions' :key='index'>
                {{item.label}}
            </Radio>
            
        </RadioGroup>
    </l-item-block>

    <l-item-block :title='"时间区间"'>
        <DatePicker 
        format="yyyy.MM.dd"
        v-model="time"
        type='daterange' 
        placement='right' 
        size='small' 
        :style='{width: "12.2rem"}'></DatePicker>
    </l-item-block>

    <l-item-block>
        <Button long @click='search' size='small' type='primary'>
            搜索
        </Button>
    </l-item-block>

</div>

</template>

<script lang='ts'>
import {Component, Vue, Watch} from 'vue-property-decorator'

import {mapState} from 'vuex'
import {formatDate, deepCopy} from '@/utils/tools'
import carStatusConf from '@/components/ivew_conf/car_status_conf'

const departmentList = () => import('@/components/ivew_components/organization_select/department_list/index.vue')
const itemBlock =  () => import('@/components/ivew_components/table_tools_item_block/index.vue')


@Component({

    components: {
        'l-item-block': itemBlock,
        'l-department-list': departmentList
    }
})
export default class searchForm extends Vue{

    name:string = 'searchForm'
    carStatusConf = carStatusConf

    get tableReqParams ():carOrderReq{
        return this.$store['state']['carTableStore']['tableReqParams'];
    }

    get companys (){
        return this.$store['state']['organizationStore']['companys']
    }


    get form(){
        return this.tableReqParams;
    }

    searchType:string = 'orderId'

    // 清除类型历史记录
    @Watch('searchType')
    onSearchTypeChange(newVal, oldVal){
        this.tableReqParams[oldVal] = '';
    }

    typeOptions = [
        {
            label: '订单号',
            value: 'orderId'
        },
        {
            label: '车牌号',
            value: 'plateNo'
        },
        {
            label: '车架号',
            value: 'vin'
        },
        {
            label: '发动机号',
            value: 'engineNo'
        },
        {
            label: '被保人',
            value: 'insured'
        },
        {
            label: '核保人',
            value: 'reviewedUserNickname'
        },
        {
            label: '出单人',
            value: 'memberNickname'
        },
    ]

    // 时间类型接口转换
    get timeType ():number{
        let dateRangKing = this.form['dateRangKing'];
        return typeof dateRangKing === 'number' ? dateRangKing : 3;
    }   

    set timeType (data){
        this.tableReqParams['dateRangKing']  = data = 3 ? data : null;
    }
    
    timeOptions = [
        
        {
            label: '建档日期',
            value: 0
        },
        {
            label: '核保日期',
            value: 1
        },
        {
            label: '缴费日期',
            value: 2
        },
        {
            label: '全部类型',
            value: 3
        }
    ]

    get time (){

        let end =  [
            this.tableReqParams['dateBegin'],
            this.tableReqParams['dateEnd']            
        ]
        
        return end
    }

    set time(date){
        this.tableReqParams['dateBegin'] = formatDate(date[0]);
        this.tableReqParams['dateEnd'] = formatDate(date[1]);
        
    }

    // 部门按键
    get departmentBtns(){
        let tableReqParams = this.tableReqParams;
        let map = ['memberCompany', 'memberDepartment'];
        let cache = [];

        map.forEach(key =>{

            if(tableReqParams[key]){
                cache.push(tableReqParams[key])
            }
            
        })
        
        if(!cache.length){
            cache.push('总公司')
        }
        
        return cache
    }

    search(){

        // 刷新请求参数，防止时间组件清空后，无法正常显示时间配置
        let tableReqParams  = deepCopy(this.tableReqParams);
        this.$store.commit('carTableStore/updateTableReqParams', tableReqParams);
        
        // 触发数据请求
        this.$store.dispatch('request', {
            url: 'get/orders',
            data: {}
        })
    }   

    // 缓存部门选中项数据
    selectDepartment(currentData){
        let {company, department}  = currentData

        this.tableReqParams['memberCompany'] = company;
        this.tableReqParams['memberDepartment'] = department;
    }

    created(){
        this.$store.dispatch('organizationStore/initOrganization').then(success =>{})
    }   
    
}

</script>

<style scoped lang='scss'>

.department-content{
    max-height: _rem(400px);
}
.department-select-btns{
    text-align: right;
}
</style>